<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 
        最终的形式：
            vm ==> app组件 ==> hello组件和school组件（有一个子组件student），app组件处于“一人之下，万人之上”的地位
        写法：先写子组件，然后再写父组件
        注意：对于父组件，里面template和components一般都是有的；子组件则不一定

     -->
    <div id="root">
        <!-- 第三步：使用组件 -->
        <school>
            <!-- 下面写在里面的写法是错的 -->
            <student></student>
        </school>
        <!-- 既然student是school的子组件，这里就不能再写在外面了 -->
        <!-- <student></student> -->
        <!-- 既然，写在外面和里面都是错的，那么要写在哪里呢，应该是写在创建父组件的template里面 -->
    </div>

    <script>
        Vue.config.productionTip = false;

        // 创建hello组件
        const hello = Vue.extend({
            template:`
                <h1>{{ msg }}</h1>
            `,
            data() {
                return {
                    msg: '欢迎'
                }
            }
        })

        // 第一步：创建student组件，student组件是school组件的子组件，
        const student = Vue.extend({
            template:`
              <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
              </div>
            `,
            data() {
                return {
                    studentName: '张三',
                    age: 18
                }
            }
        }) 

        // 创建school组件，这里的名字并不是组件真正的名字
        const school = Vue.extend({
            // 使用templat配置组件的结构，最好使用模板字符串
            // 要在外面套一层根元素，且只能有1个根元素
            template: `
                <div>
                    <h2>学校名称：{{ schoolName }}</h2>
                    <h2>学校地址：{{ address }}</h2>
                    <student></student>
                </div>
            `,
            data() {
                return {
                    schoolName: '尚硅谷',
                    address: '北京昌平'
                }
            },
            // 因为student组件是school组件的子组件，所以需要在school组件里面再注册组件
            // 这里需要注意顺序，如果组件没有创建就使用，是非法的
            components: {
                student
            }
        }) 

        // 创建app组件，app组件是vm之下统领其他组件的组件
        const app = Vue.extend({
            // 尽管student是school的子组件，但是在创建school的时候，就已经指定过了，所以这里不需要再写出student组件标签了
            // 注意：这里也要在外面套一层div
            template:`
                <div>
                    <hello></hello>
                    <school></school>
                </div>
            `,
            // 它是school组件和hello组件的父组件，所以需要写components
            components: {
                hello,
                school
            }
        })

        new Vue({
            el: "#root",
            template:`<app></app>`,
            data: {
                
            },
            // 第二步：注册局部组件
            components: {
                // school,
                // student
                // 交给“丞相”管理
                app
            }

        });

        
    </script>
</body>
</html>